<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/favicon.ico">

    <title>Dashboard</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <!-- <link href="/static/css/bootstrap-theme.min.css" rel="stylesheet"> -->

    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>

  </head>

</script>

  <body>

<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="/">WYPROXY Dashboard</a>
</div>

<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
    <li><a href="/settings">系统设置</a></li>
    <li><a href="https://github.com/ring04h/wyproxy" target="_blank">帮助</a></li>
  </ul>

<form class="navbar-form navbar-right" action='/q?'>         
<div class="form-group">
<input type="text" placeholder="host:qq.com port:80,443 status:200" name='s' class="form-control" style="width: 320px" value="{% if search %}{{search}}{% endif %}">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>

</div>
</div>
</nav>


<div class="container">

<table class="table table-striped" cellspacing="0" width="100%">
<thead>
<tr>
    <th>ID</th>
    <th>Host</th>
    <th>Method</th>
    <th>Path</th>
    <th>Type</th>
    <th>Status</th>
    <th>Datetime</th>
    <th>Operation</th>
</tr>
</thead>
    <tbody>

{% for record in records %}
<tr>
<td><a href="/r?id={{record.id}}" target="_blank">#{{record.id}}</a></td>
<td>{{record.host | truncate(40, True)}}:{{record.port}}</td>
<td>{{record.method}}</td>
<td>{{record.path | truncate(40, True)}}</td>
<td><a href="/q?s=content_type:{{record.content_type}}">{{record.content_type}}</a></td>
<td>{{record.status_code}}</td>
<td>{{record.date_start}}</td>
<td>
<a class="btn btn-default btn-xs" href="/r?id={{record.id}}" target="_blank" role="button">查看回放</a>
<a class="btn btn-danger btn-xs" href="/del?id={{record.id}}" role="button">删除</a></td>
    </tr>
{% endfor %}

    </tbody>
</table>


<nav>
  <ul class="pager">


{% if page <= 1 %}
<li class="disabled"><a><span aria-hidden="true">&larr;</span> 上一页</a></li>
<li class="disabled"><a>首页</a></li>
{% else %}
<li>
{% if search %}
<a href="/q?s={{search}}&p={{page-1}}">
{% else %}
<a href="/?p={{page-1}}">
{% endif %}
<span aria-hidden="true">&larr;</span> 上一页</a></li>
<li>
{% if search %}
<a href="/q?s={{search}}&p=1">
{% else %}
<a href="/?p=1">
{% endif %}
首页</a></li>
{% endif %}

{% if page == max_page %}
<li class="disabled"><a>尾页</a></li><li>
<li class="disabled"><a>下一页 <span aria-hidden="true">&rarr;</span></a></li>
{% else %}
<li>
{% if search %}
<a href="/q?s={{search}}&p={{max_page}}">
{% else %}
<a href="/?p={{max_page}}">
{% endif %}
尾页</a></li>
<li>
{% if search %}
<a href="/q?s={{search}}&p={{page+1}}">
{% else %}
<a href="/?p={{page+1}}">
{% endif %}
 下一页 <span aria-hidden="true">&rarr;</span></a></li>
{% endif %}

  </ul>
</nav>


<footer class="footer">
<p>&copy; 贝塔科技 2016</p>
</footer>

</div> <!-- /container -->
</body>
</html>